<template>
  <div>
    <div style="margin-top: 10px">
      <el-table
          :data="ol"
          stripe
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
            prop="id"
            label="订单编号"
            fixed
            align="center"
            width="80"
        >
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="uid"-->
<!--            label="用户编号"-->
<!--            fixed-->
<!--            align="center"-->
<!--            width="80"-->
<!--        >-->
<!--        </el-table-column>-->
        <el-table-column prop="gid" label="商品编号" align="left" width="80">
        </el-table-column>
        <el-table-column prop="uname" label="顾客姓名" align="left" width="120">
        </el-table-column>
        <el-table-column
            prop="uaddress"
            label="顾客地址"
            align="left"
            width="180"
        >
        </el-table-column>
        <el-table-column
            prop="uphoneNum"
            label="联系电话"
            align="left"
            width="180"
        >
        </el-table-column>
        <el-table-column
            prop="ocreationDate"
            label="下单时间"
            align="left"
            width="180"
        >
        </el-table-column>
        <el-table-column
            prop="ostatus"
            label="订单备注"
            align="left"
            width="240"
        >
        </el-table-column>
        <el-table-column label="订单状态" align="left" width="150">
          <template scope="scope">
            <el-tag type="success" v-if="scope.row.oisFinished == 1"
            >交易成功</el-tag
            >
            <el-tag type="danger" v-else-if="scope.row.oisFinished == 2"
            >交易失败</el-tag
            >
            <el-tag type="warning" v-else-if="scope.row.oisFinished == 0"
            >等待商家处理</el-tag
            >
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" fixed="right" width="160">
          <template slot-scope="scope">
            <el-button style="padding: 3px" size="mini" icon="el-icon-search"
              >明细</el-button
            >
            <el-button
              @click="deleteOrder(scope.row)"
              style="padding: 3px"
              size="mini"
              type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div style="margin-top: 10px; display: flex; justify-content: flex-end">
        <el-pagination
            background
            @current-change="currentChange"
            @size-change="sizeChange"
            layout="sizes, prev, pager, next, jumper, ->, total"
            :page-size="size"
            :page-sizes="[5, 10, 20, 30, 40]"
            :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderList",
  data() {
    return {
      loading: false,
      ol: [],
      total: 0,
      currentPage: 1,
      size: 5,
      nameZh: "",
      uname: "",
      uname2: "",
      user: "",
    };
  },
  mounted() {
    this.user = JSON.parse(window.sessionStorage.getItem("user"));
    this.initOrderList();
  },
  methods: {
    // deleteOrder(data) {
    //   this.$confirm(
    //     "是否删除订单编号为【" + data.id + "】的历史订单记录?",
    //     "提示",
    //     {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     }
    //   )
    //     .then(() => {
    //       this.deleteRequest("/order/history/" + data.id).then((resp) => {
    //         if (resp) {
    //           this.initOrderList();
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消该操作",
    //       });
    //     });
    // },
    sizeChange(size) {
      this.size = size;
      this.initOrderList();
    },
    currentChange(currentPage) {
      this.currentPage = currentPage;
      this.initOrderList();
    },
    initOrderList() {
      this.loading = true;
      this.uname2 = JSON.parse(window.sessionStorage.getItem("user"))["id"];
      console.log(this.uname2);
      let url = "";
      url =
          "/order/history/customer/all?currentPage=" +
          this.currentPage +
          "&size=" +
          this.size +
          "&uId=" +
          this.user.id;
      console.log(url);
      this.getRequest(url).then((resp) => {
        this.loading = false;
        if (resp) {
          this.ol = resp.data;
          this.total = resp.total;
        }
      });
    },
  },
};
</script>

<style scoped>
.image {
  background-color: aliceblue;
  position: absolute;
  left: 30%;
  top: 40%;
  transform: translate(-50%, -50%);
}
.button1 {
  position: absolute;
  left: 30%;
  top: 70%;
  transform: translate(-50%, -50%);
  margin-top: 100px;
}

.tag1 {
  position: absolute;
  left: 30%;
  top: 55%;
  transform: translate(-50%, -50%);
  margin-top: 100px;
}

.box-card {
  width: 480px;
  position: absolute;
  left: 70%;
  top: 24.5%;
  transform: translate(-50%, -50%);
  margin-top: 100px;
}
</style>